<template>
  <div class="menu-container">
    <div class="title">
      <img src="../assets/logo.png" />
      <h1>xxx管理系统</h1>
    </div>
    <a-menu mode="inline" theme="dark" :selectedKeys="selectedKeys" @click="handleClickItem">
      <template v-for="(item, index) in menus" :key="item.path">
        <a-menu-item v-if="!item.children" :key="item.path">
          <pie-chart-outlined v-if="index % 3 === 0" />
          <desktop-outlined v-if="index % 3 === 1" />
          <user-outlined v-if="index % 3 === 2" />
          <span>{{ item.name }}</span>
        </a-menu-item>
        <a-sub-menu v-else>
          <template #title>
            <span>
              <pie-chart-outlined v-if="index % 3 === 0" />
              <desktop-outlined v-if="index % 3 === 1" />
              <user-outlined v-if="index % 3 === 2" />
              <span>{{ item.name }}</span>
            </span>
          </template>
          <a-menu-item v-for="(child, cIndex) in item.children" :key="child.path">
            <pie-chart-outlined v-if="cIndex % 3 === 0" />
            <desktop-outlined v-if="cIndex % 3 === 1" />
            <user-outlined v-if="cIndex % 3 === 2" />
            <span>{{ child.name }}</span>
          </a-menu-item>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>

<script>
import { PieChartOutlined, DesktopOutlined, UserOutlined } from '@ant-design/icons-vue';
import { mapState } from 'vuex';

export default {
  name: "GlobalMenus",
  components: {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined
  },
  data() {
    return {
      openKeys: [],
      selectedKeys: []
    }
  },
  computed: {
    ...mapState({
      menus: (state) => {
        console.log('state', state.menus);
        return state.menus;
      }
    }),
    getMenusPath() {
      const getMenus = function (data, arr = []) {
        data.forEach((item) => {
          if (item.path || item.id) {
            arr.push(item.path || item.id);
          }
          if (item.children && item.children.length) {
            getMenus(item.children, arr);
          }
        });
        return arr;
      };
      if(this.menus && this.menus.length) {
        const arr = getMenus(this.menus);
        return arr;
      } else {
        return [];
      }
    }
  },
  methods: {
    handleClickItem({ key }) {
      if (key && key.indexOf('http') > -1) {
        window.location.href = key;
      } else {
        this.$router.push(key);
      }
    }
  },
  created() {
    this.selectedKeys = [this.$route.fullPath];
  },
  watch: {
    $route: function(newVal) {
      if (this.getMenusPath.indexOf(newVal.fullPath) > -1) {
        this.selectedKeys = [newVal.fullPath];
      }
    }
  }
}
</script>

<style scoped lang="less">
  .menu-container{
    .title{
      padding: 8px 12px;
      h1{
        display: inline-block;
        color: #fff;
        font-size: 20px;
        margin: 0 0 0 12px;
        font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
        font-weight: 600;
        vertical-align: middle;
      }
      img{
        width: 30px;
      }
    }
  }
</style>